<template>
    <div>
        <!-- 仪表盘 -->
        <div ref="chartContainer" style="width:150px;height: 150px"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref<any>(null);
const propsRef = defineProps(["ProductionEfficiency","maxProductionEfficiency"])
const props = ref<any>(propsRef)

const chartInstance = ref()
const loadData = (value: any,value2:any) => {
    chartInstance.value = echarts.init(chartContainer.value);

    const option = {
        // tooltip: {
        //     formatter: '{a} <br/>{b} : {c}%'
        // },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                max: 40000,
                // 仪表盘标题。
                title: {
                    show: true,  //是否显示标题。
                    offsetCenter: [0, '70%'],  //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                    color: "rgba(89, 89, 89, 1)",   // 文字的颜色
                    fontStyle: "normal",  //文字字体的风格
                    fontFamily: "'sans-serif'",
                    fontSize: 12
                },
                data: [
                    {
                        name: '检测效率',  //数据项的名称
                        value: value, // 数据项值
                        itemStyle: {

                        }
                    }
                ],
                startAngle: "180",   //仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: "360",  //仪表盘结束角度
                clockwise: true,  //仪表盘刻度是否是顺时针增长。
                splitNumber: 4,  //仪表盘刻度的分割段数。

                // 仪表盘轴线相关配置
                axisLine: {
                    show: true,  //是否显示仪表盘轴线。
                    // 仪表盘轴线样式。
                    lineStyle: {
                        width: 5,  //轴线宽度
                    },
                },

                // 展示当前进度。
                progress: {
                    show: true,
                    width: 5, // 进度条宽度
                    // 进度条样式。
                    itemStyle: {
                        // 图形的颜色
                        color: {
                            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#fce62a' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#f97b72' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                    }
                },

                // 刻度样式。
                axisTick: {//用于设置刻度线的样式
                    show: true, // 不显示刻度线
                    splitNumber: 3,  //分隔线之间分割的刻度数。
                    length: 6,   //刻度线长。支持相对半径的百分比。
                    distance: 9,   //刻度线与轴线的距离
                    lineStyle: {
                        color: "#bfbfbf",
                        width: 1,
                        type: "solid",
                    }
                },

                // 刻度标签
                axisLabel: {  //用于设置刻度数字的样式
                    show: false // 不显示刻度数字
                },

                // 仪表盘指针
                pointer: {   //用于设置指针的样式
                    show: true,  //表示显示指针
                    showAbove: true,  //指针是否显示在标题和仪表盘详情上方。
                    length: '60%',  //表示指针的长度占整个仪表盘半径的百分比
                    width: 2,  //表示指针的宽度
                    itemStyle: {
                        color: "#f78f42"
                    }
                },
                //表盘中指针的固定点
                anchor: {
                    show: true,  //是否显示固定点。
                    showAbove: true,   //固定点是否显示在指针上面。
                    size: 3,  //固定点大小。
                },

                // 仪表盘详情，用于显示数据。
                detail: {
                    show: true,  //是否显示详情。
                    valueAnimation: true,
                    color: "rgba(89, 89, 89, 1)",  //文本颜色，默认取数值所在的区间的颜色。
                    fontWeight: "normal",
                    formatter: "{value}",
                    textStyle: {
                        fontSize: 16 // 调整字体大小
                    }
                },
                // axisPointer: {   //用于设置仪表盘上的指针轴线样式
                //     show: true,   //表示显示指针轴线
                //     length: '90%',  //表示指针轴线的长度占整个仪表盘半径的百分比
                //     width: 8,  //表示指针轴线的宽度
                //     color: 'pink',  //表示指针轴线的颜色为粉色
                // },



            }
        ]
    };

    chartInstance.value.setOption(option);
};
onMounted(() => {
    window.onresize = () => {
        chartInstance.value.resize(); //跟对屏幕的宽度变化而变化
    };
    loadData(0,0);
});
watch(props, value => {
    loadData(value.ProductionEfficiency,value.maxProductionEfficiency);
}, {
    deep: true
})

</script>

<style scoped></style>